<!-- 发布评论组件 -->
<script setup>
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
import { getCurrentInstance } from "vue";
import { useTokenStore } from '@/store/token.js' // 导入token状态
import { useUserInfoStore } from '@/store/userInfo.js' // 导入userInfo状态 
import CommentImage from './CommentImage.vue'
import { postForumCommentService } from '@/api/forumComment';
import { useRouter, useRoute } from 'vue-router'
import { useShowLoginDialogStore } from '@/store/showLoginDiaolg';

const router = useRouter();
const route = useRoute();

const { proxy } = getCurrentInstance(); // 获取全局注册的组件

const userInfoStore = useUserInfoStore()
const tokenStore = useTokenStore()
const showLoginDialogStore = useShowLoginDialogStore()

// 父组件传递过来的参数
const props = defineProps({
  commentType: { // 本次评论的类型：0为文章评论，1为回复一级、二级评论
    type: Number
  },
  avatarWidth: { // 头像大小
    type: Number,
    default: 50
  },
  showInsertImg: { // 是否展示插入图片（若回复评论则不能插入图片，若只是发布评论则可以）
    type: Boolean,
    default: false
  },
  placeholderInfo: { // 评论框中的提示文字
    type: String,
    default: "请文明发言~",
  },
  // ------------------------------------------------------------------------------
  forumArticle: {
    type: Object,
    default: {}
  },
  chooseComment: { // 父级评论
    type: Object,
    default: {}
  },
})

// 加载效果
const loadingRequest = ref(false)

// 可以只发表图片评论
const checkPostComment = (rule, value, callback) => {
  if (value == null && formData.value.imgPath == null) {
    callback(new Error(rule.message))
  } else {
    callback()
  }
}

// 发表评论的表单信息
const formData = ref({
  content: '', // 评论内容 
  commentImg: null, // 评论携带图片
})
const formDataRef = ref()
const rules = {
  content: [
    { required: true, message: "请输入评论内容", validator: checkPostComment },
    { min: 5, message: "评论内容至少5个字" }
  ],
}

// 自定义实现发表评论时的选择图片的功能
const commentImg = ref(null)
const selectImg = (file) => {
  console.log("123file", file)

  // 这里我们只需要file中的.file属性
  file = file.file

  // 将file图片添加到表单
  formData.value.commentImg = file

  // 创建文件流，显示到页面中
  let img = new FileReader()
  img.readAsDataURL(file)
  img.onload = ({ target }) => {
    console.log("target: ", target)
    let imgData = target.result // target.result 为："......"
    commentImg.value = imgData
  }
}

// 删除发表评论中携带的图片
const removeCommentImg = () => {
  // 去除表单中的评论图片
  formData.value.commentImg = null
  // 去除页面中的评论图片
  commentImg.value = null
}

// 父级方法，将发表完的评论回显到页面
const emit = defineEmits(["postCommentFinish"])

// 发表评论
const postComment = () => {

  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      console.log("校验未通过")
      return
    }

    // 准备要发表的评论的数据
    let param = null
    if (props.commentType == 0) {
      // 文章评论
      param = {
        parentCommentId: 0, // 父级评论ID
        articleId: props.forumArticle.articleId, // 文章ID
        articleTitle: props.forumArticle.title, // 文章标题
        content: formData.value.content, // 评论内容
        replyUserId: props.forumArticle.userId, // 回复人ID
        replyNickname: props.forumArticle.nickname, // 回复人昵称
        commentImg: formData.value.commentImg, // 评论携带的图片 
      }
    } else {
      // 回复评论的评论
      param = {
        parentCommentId: props.chooseComment.commentId, // 父级评论ID
        articleId: props.forumArticle.articleId, // 文章ID
        articleTitle: props.forumArticle.title, // 文章标题
        content: formData.value.content, // 评论内容
        replyUserId: props.chooseComment.userId, // 回复人ID
        replyNickname: props.chooseComment.nickname, // 回复人昵称
        commentImg: formData.value.commentImg, // 评论携带的图片 
      }
    }

    // 开始加载
    let result = null
    try {
      loadingRequest.value = true
      result = await postForumCommentService(param)
    } finally {
      loadingRequest.value = false
    }

    console.log("文章评论发表成功", result.data)

    // 我们自己封装的通知框
    proxy.Notification.success("评论发表成功")

    // 清空输入框
    formDataRef.value.resetFields()

    // 去除页面中的评论图片
    removeCommentImg()

    // 回调父级的方法，将新发表的评论添加到页面中
    emit("postCommentFinish", result.data, props.commentType)
  })
}

// 来到用户个人中心
const goToUserCenter = () => {
  router.push('/userCenter/' + userInfoStore.userInfo.userId)
}
</script>

<template>
  <!-- 发布评论 -->
  <div class="post-comment-panel">
    <!-- 头像 -->
    <!-- <div class="avatar"><img src="../../assets/头像.jpeg" alt=""></div> -->
    <!-- 头像这里可以进行if-else判断，若用户未登录则显示“未登录” -->
    <div class="avatar">
      <img v-if="userInfoStore.userInfo.avatar" :src="userInfoStore.userInfo.avatar" alt="" @click="goToUserCenter()">
      <div v-else class="no-login" @click="showLoginDialogStore.setShowLoginDialog(true)">未登录</div>
    </div>
    <!-- 评论 -->
    <div class="comment-form">
      <el-form :model="formData" :rules="rules" ref="formDataRef">
        <!-- textarea输入 -->
        <el-form-item prop="content">
          <el-input clearable :placeholder=placeholderInfo type="textarea" resize="none" :rows="2" maxlength="800"
            show-word-limit v-model="formData.content"></el-input>
          <!-- 上传图片 -->
          <!-- 这里应该判断用户是否登录，登录了才显示上传图片按钮 -->
          <div class="insert-img" v-if="showInsertImg">
            <!-- 我们自己写的图片预览组件 -->
            <div class="pre-img" v-if="commentImg">
              <CommentImage :src="commentImg"></CommentImage>
              <span class="iconfont icon-cancel" @click="removeCommentImg"></span>
            </div>
            <el-upload v-else name="file" :multiple="false" :show-file-list="false"
              accept=".png, .PNG, .jpg, .JPG, .jpeg, .JPEG, .gif, .GIF, .bmp, .BMP" :http-request="selectImg">
              <span class="iconfont icon-image"></span>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!-- 按钮 发送评论 -->
    <div class="send-btn" @click="postComment" v-loading="loadingRequest">发表</div>
  </div>
</template>

<style>
/* 发布评论区 */
.post-comment-panel {
  display: flex;
}

/* 头像 */
.post-comment-panel .avatar img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin-right: 20px;
  cursor: pointer;
  object-fit: contain;
}

.post-comment-panel .avatar .no-login {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin-right: 20px;
  background-color: #f0f0f0;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  cursor: pointer;
}

/* 评论 */
.post-comment-panel .comment-form {
  flex: 1;
  margin-right: 10px;
}

/* 图片预览组件 */
.post-comment-panel .comment-form .insert-img {
  line-height: normal;
}

.post-comment-panel .comment-form .insert-img .pre-img {
  margin-top: 10px;
  position: relative;
}

.post-comment-panel .comment-form .insert-img .pre-img .iconfont {
  margin-top: 5px;
  font-size: 20px;
  color: #5e5e5e;
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
}

/* 按钮 发送评论 */
.post-comment-panel .send-btn {
  background-color: #67C23A;
  height: 50px;
  line-height: 50px;
  width: 70px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.post-comment-panel .send-btn:hover {
  background-color: #95d475;
}

/* 图片预览组件 */
</style>